import { createRouter, createWebHashHistory } from 'vue-router';
import About from '../components/About.vue';
import Article from '../components/Article.vue';
import Films from '../components/Films.vue';
import Hengban from '../components/Hengban.vue';
import Home from '../components/Home.vue';
import News from '../components/News.vue';
import NotFound from '../components/NotFound.vue';
import Shuban from '../components/Shuban.vue';
import User from '../components/User.vue';
import Page from '../components/Page.vue';

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/news/:id', component: News, name: 'news' },
    { path: '/:path(.*)', component: NotFound },
    { path: '/article/:id(\\d+)', component: Article }, // '/article/:id(\\d+)' id一定为number类型
    // { path: '/films/:id+', component: Films },// +号 至少一个参数 多层级 /films/a/b/c  ==》 [ "a", "b", "c" ]
    { path: '/films/:id*', component: Films },////  *号 可有可无参数 多层级 /films/1/2/3  ==》 [ "1", "2", "3" ]
    {
        path: '/user',// 嵌套路由
        component: User,
        children: [{ path: 'hengban', component: Hengban }, { path: 'shuban', component: Shuban }]
    },
    {
        path: '/page',
        component: Page,
        beforeEnter: (to, from, next) => { // 组件路由守卫
            console.log('beforeEnter-----', to, from);
            next()
        }
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

// 单个路由守卫 beforeEnter
// 全局路由守卫 beforeEach
// 路由跳转完成后   beforeResolve

// 组件路由 进入 beforeRouteEnter
// 组件路由 更新 beforeRouteUpdate
// 组件路由 离开 beforeRouteLeave

router.beforeEach((to, from, next) => {
    // console.log('to------', to); // to 跳转去的哪个页面
    // console.log('from----', from); // from 从哪个页面跳转过来
    next()
});

router.beforeResolve((to, from, next) => {
    console.log('beforeResolve-----', to, from);
    next();
});

export default router;
